<template>
	<view class="app-public-msg-msg-item" @tap="$emit('click')">
		<view class="app-public-msg-msg-item__time">
			<text class="app-public-msg-msg-item__time__text ">{{timeFrom(info.t,toI18('public.yesterday'))}}</text>
		</view>
		<view class="app-public-msg-msg-item__box"  :class="[self ? 'app-public-msg-msg-item__box--self' : '']">
			<view :class="[self ? 'app-public-msg-msg-item__box__avatar--self' : 'app-public-msg-msg-item__box__avatar']">
				<load-image shape="circle" mode="aspectFill" :size="['80rpx']" :src="fullLink(info.avatar)">
					<template #error>
						<load-image shape="circle" :mobile="false" :size="['80rpx']" src="/pages/public/static/msg/default_user_header.png" />
					</template>
				</load-image>
				
				
			</view>
			<!-- v-if="info.msg.type === 'text'||info.msg.type === 'emoji'||info.msg.type === 'quick'" -->
			<view class="app-public-msg-msg-item__txt" :class="[self ? 'app-public-msg-msg-item__txt--self' : '']" :style="[self ? textSelfStyle:{}]"
				v-if="info.ct === 1">
				
				<text class="e-flex-1">{{info.c}}</text>
			</view>
			<load-image mode="widthFix" radius="16rpx" :size="['212rpx']" :src="fullLink(info.ic.coverurl)" @click="previewImage" v-else-if="info.ct === 6"></load-image>
			<custom-msg v-else-if="info.ct === 100" :unitEn="unitEn" :info="info">
				
			</custom-msg>
		</view>


	</view>
</template>
<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>
<script lang="ts" setup>
	import {computed} from 'vue'
	import type {
		ReceiveMsg
	} from '@/common/utils/IM'
	import {timeFrom} from '../utils'
	import customMsg from './customMsg.vue'
	import { useIM } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	// #ifndef APP-NVUE
	import {
		useI18n
	} from '@/common/hooks'
	// #endif
	
	
	const props = defineProps < {
		info: ReceiveMsg,
		user:number,
		unitEn:string,
		primary:string,
	} > ()
	
	const {tiocomConfig} = storeToRefs(useIM())
	
	const fullLink = (url:string) => `${tiocomConfig.value.res_server}/${url}`
	
	// #ifdef APP-NVUE
	const toI18 = getApp().globalData.$t
	// #endif
	// #ifndef APP-NVUE
	const toI18 = useI18n('')
	// #endif
	
	const textSelfStyle = computed(() => {
		return {
			backgroundColor:props.primary
		}
	})
	
	const self = computed(() => props.info.uid === props.user)
	
	const previewImage = () => {
		uni.previewImage({
			current: 0,
			urls: [fullLink(props.info.ic.url)]
		})
	}
	
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-msg-item) {
		@include appBem_e(time) {
			@include flex;
			justify-content: center;
			padding-bottom: 40rpx;

			&__text {
				color: #B2B2B2;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}

		@include appBem_e(box) {
			@include flex;
			align-items: center;
			padding-left: 120rpx;
			padding-right: 20rpx;
			padding-bottom: 40rpx;
			position: relative;
			&__avatar{
				position: absolute;
				left: 20rpx;
				top: 0;
			}
			&__avatar--self{
				position: absolute;
				right: 20rpx;
				top: 0;
			}

			@include appBem_m(self) {
				justify-content: flex-end;
				padding-left: 20rpx;
				padding-right: 120rpx;
			}
		}

		@include appBem_e(txt) {
			// #ifndef  APP-NVUE
			max-width: 610rpx;
			word-break:break-all;
			// #endif
			padding: 22rpx;
			background-color: #fff;
			border-radius: 16rpx;
			color: #313133;
			

			@include appBem_m(self) {
				color: #fff;
			}

		}
	}
</style>
